@import 'common.less';

.map{
    width: 750/@rem;height: 100%;position: fixed;left: 50%;top: 0;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    .map-tag{
        width: 484/@rem;height: 70/@rem;background: rgba(0,0,0,0.3);border-radius: 16/@rem;overflow: hidden;position: fixed;left: 50%;top: 40/@rem;z-index: 1;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        a{
            float: left;width: 50%;height: 70/@rem;line-height: 70/@rem;color: #fff;text-align: center;font-size: 32/@rem;
            &.active{background: #f03f58;}
        }
    }
    .toindex{
        position: fixed;width: 180/@rem;height: 55/@rem;line-height: 55/@rem;border-radius: 110/@rem;text-align: center;color: #f03f58;background: #fff;border: 2/@rem solid #f03f58;z-index: 1;
        &.toindex-yuexiu{right: 55/@rem;bottom: 74/@rem;}
        &.toindex-chancheng{left: 50%;bottom: 260/@rem;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);}
    }
    .mapmain{
        width: 750/@rem;height: 100%;position: fixed;left: 50%;top: 0;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        &.mapmain-yuexiu{background: url("/src/img/mapmain-yuexiu.jpg") no-repeat;background-size: 750/@rem;}
        &.mapmain-chancheng{background: url("/src/img/mapmain-chancheng.jpg") no-repeat;background-size: 750/@rem;}
    }
    .mapmain-pic{
        width: 640/@rem;position: fixed;left: 50%;bottom: 486/@rem;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        a{
            float: left;width: 128/@rem;height: 434/@rem;position: relative;
            img{width: 128/@rem;vertical-align: middle;}
            &:before{content: '';display: block;position: absolute;left: 0;top: 0;width: 128/@rem;height: 434/@rem;background-size: 128/@rem 434/@rem;}
            &.odd:before{background-image: url("/src/img/img-odd.png");}
            &.even:before{background-image: url("/src/img/img-even.png");}
            &.active:before{display: none;}
        }
        &.mapmain-pic-chancheng{bottom: 550/@rem;}
    }
    .mapmain-btn{
        position: fixed;z-index: 1;
        &.mapmain-btn-yuexiu{right: 55/@rem;bottom: 125/@rem;}
        &.mapmain-btn-chancheng{left: 50%;bottom: 335/@rem;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);}
        &.mapmain-btn-chancheng a:first-child{
            span{display: block;width: 33/@rem;float: left;}
            &:after{width: 47/@rem;}
        }
        a{
            display: inline-block;width: 33/@rem;font-size: 33/@rem;line-height: 35/@rem;position: relative;margin: 42/@rem 0 0 40/@rem;float: left;
            &:before{content: '';width: 16/@rem;height: 16/@rem;border-radius: 32/@rem;display: block;overflow: hidden;position: absolute;left: 50%;top: -42/@rem;background: #ca0d3a;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);}
            &:after{content: '';width: 30/@rem;height: 0;border-top: 2/@rem solid #ca0d3a;position: absolute;top: -35/@rem;right: -35/@rem;}
            &:last-child:after{display: none;}
            &.active{color: #ca0d3a;}
        }
    }
    .mapmain-bottom-yuexiu{
        width: 351/@rem;height: 405/@rem;position: fixed;left: 55/@rem;bottom: 65/@rem;
        img{width: 351/@rem;height: 405/@rem;vertical-align: middle;}
    }
    .mapmain-bottom-chancheng{
        width: 750/@rem;height: 257/@rem;position: fixed;left: 0;bottom: 0;background: url("/src/img/zmbg.png") no-repeat;background-size: 750/@rem 257/@rem;
    }
}
.mappop{
    width: 100%;height: 100%;position: fixed;left: 0;top: 0;background: rgba(0,0,0,0.8);
    .mappopbox{
        width: 536/@rem;height: 897/@rem;position: fixed;left: 50%;top: 50%;border-radius: 10/@rem;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        .mappopbox-close{width: 113/@rem;height: 113/@rem;background: url("/src/img/close.png") no-repeat;background-size: 113/@rem 113/@rem;position: absolute;top: -56/@rem;right: -56/@rem;z-index: 1;}
        .mappopbox-pic{
            width: 536/@rem;height: 374/@rem;position: relative;border-radius: 10/@rem 10/@rem 0 0;overflow: hidden;
            img{width: 536/@rem;vertical-align: middle;}
            p{position: absolute;left: 0;bottom: 0;width: 100%;height: 79/@rem;line-height: 79/@rem;color: #fff;font-size: 34/@rem;padding: 0 33/@rem;background: rgba(0,0,0,0.7);}
        }
        .mappopbox-main{
            height: 463/@rem;background: #fff;padding: 30/@rem 0;border-radius: 0 0 10/@rem 10/@rem;
            .mappopbox-content{height: 315/@rem;overflow: auto;font-size: 24/@rem;line-height: 32/@rem;color: #666;padding: 0 31/@rem;}
            .mappopbox-btn{display: block;width: 455/@rem;height: 80/@rem;line-height: 80/@rem;border-radius: 160/@rem;margin: 30/@rem auto 0;color: #fff;text-align: center;font-size: 32/@rem;background: #f03f58;}
            .mappopbox-link{
              width: 455/@rem;text-align: right;margin: 10/@rem auto 0;
                a{font-size: 24/@rem;line-height: 30/@rem;color: #666;}
            }
        }
    }
}
.positionTip{
    position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 2;
    .positionTipbox{
        position: fixed;left: 50%;top: 50%;padding: 60/@rem 30/@rem;color: #fff;text-align: center;width: 300/@rem;background: rgba(0,0,0,0.8);border-radius: 10/@rem;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        p{font-size: 24/@rem;line-height: 30/@rem;}
        .title{font-size: 44/@rem;line-height: 44/@rem;margin-bottom: 25/@rem;}

    }
}



.form{
    width: 100%;height: 100%;position: fixed;left: 0;top: 0;background: rgba(0,0,0,0.8);
    .formbox{
        position: fixed;left: 50%;top: 50%;background: #fff;width: 456/@rem;height: 817/@rem;border-radius: 10/@rem;padding: 0 40/@rem;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        .formbox-close{width: 113/@rem;height: 113/@rem;background: url("/src/img/close.png") no-repeat;background-size: 113/@rem 113/@rem;position: absolute;top: -56/@rem;right: -56/@rem;z-index: 1;}
        .userpic{
            height: 126/@rem;text-align: center;margin-top: 45/@rem;
            img{width: 126/@rem;height: 126/@rem;vertical-align: middle;border-radius: 252/@rem;}
        }
        .title{
            font-size: 32/@rem;line-height: 36/@rem;text-align: center;color: #666;border-bottom: 1/@rem solid #e1e1e1;padding-bottom: 35/@rem;margin-top: 17/@rem;
            em{padding: 0 7/@rem;color: #f03f58;font-style: normal;}
        }
        .uploadbox{
            display: block;overflow: hidden;margin-top: 30/@rem;
            div{
                width: 205/@rem;height: 139/@rem;border: 1/@rem solid #e1e1e1;border-radius: 20/@rem;position: relative;overflow: hidden;
                p{font-size: 24/@rem;line-height: 24/@rem;position: absolute;left: 0;bottom: 16/@rem;width: 100%;text-align: center;color: #999;}
                &:before{content: '';position: absolute;left: 50%;top: 58/@rem;width: 60/@rem;height: 0;border-top: 4/@rem solid #e1e1e1;
                    -webkit-transform: translateX(-50%);
                    -moz-transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                    -o-transform: translateX(-50%);
                    transform: translateX(-50%);}
                &:after{content: '';position: absolute;left: 50%;top: 29/@rem;width: 0;height: 60/@rem;border-left: 4/@rem solid #e1e1e1;
                    -webkit-transform: translateX(-50%);
                    -moz-transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                    -o-transform: translateX(-50%);
                    transform: translateX(-50%);}
                input{width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 2;background: none;font-size: 0;border: 0;opacity: 0;}
                img{width: 100%;vertical-align: middle;position: absolute;left: 0;top: 50%;z-index: 1;margin: -2/@rem 0 0 0;
                    -webkit-transform: translateY(-50%);
                    -moz-transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                    -o-transform: translateY(-50%);
                    transform: translateY(-50%);}
            }
            div:first-child{float: left;}
            div:last-child{float: right;}
        }
        .forminfo{
            .forminfo-input{
                width: 277/@rem;height: 68/@rem;border: 1/@rem solid #e1e1e1;position:relative;border-radius: 140/@rem;padding: 0 40/@rem 0 125/@rem;margin: 25/@rem auto 0;
                span{position: absolute;left: 30/@rem;top: 0;width: 80/@rem;height: 68/@rem;line-height: 68/@rem;font-size: 24/@rem;}
                input{width: 100%;background: none;vertical-align: middle;font-size: 24/@rem;border: 0;padding: 20/@rem 0;color: #a0a0a0;}
            }
        }
        .formbtn{display: block;height: 80/@rem;line-height: 80/@rem;font-size: 32/@rem;text-align: center;color: #fff;background: #f03f58;border-radius: 160/@rem;margin-top: 32/@rem;}
        .formlink{
            margin-top: 17/@rem;text-align: center;
            a{color: #666;font-size: 24/@rem;line-height: 24/@rem;}
        }
    }
}


.clipbox{position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.75);}
.clipArea{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.clipBtn{position: absolute;left: 50%;bottom: 30/@rem;border: 0;background: -webkit-linear-gradient(90deg, #f7e81f, #fff45d);width: 324/@rem;height: 76/@rem;line-height: 76/@rem;border-radius: 162/@rem;border: 5/@rem solid #713f04;color: #603300;text-align: center;font-size: 36/@rem;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);}
.blesslayout{
    width: 100%;height: 100%;position: fixed;left: 0;top: 0;overflow: auto;
    .bless{
        position: absolute;left: 0;top: 0;width: 100%;height: 2230/@rem;background: #6a3d07;
        .blessbox{
            width: 664/@rem;margin: 64/@rem auto 0;
            a{
                display: block;line-height: 45/@rem;font-size: 26/@rem;color: #6c3a00;background: #e2d7ac;border-radius: 6/@rem;margin-bottom: 30/@rem;padding: 10/@rem;
                &.active{background: #dcc72a;}
            }
        }
        .blessbtn{
            width: 664/@rem;margin: 0 auto;
            a{width: 304/@rem;height: 73/@rem;line-height: 73/@rem;border: 5/@rem solid #713f04;background: -webkit-linear-gradient(90deg, #f7e81f, #fff45d);border-radius: 156/@rem;display: inline-block;text-align: center;font-size: 36/@rem;}
            a:first-child{float: left;}
            a:last-child{float: right;}
        }
    }
}
.uploadLoding{position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: url("/src/img/loading.png") no-repeat center;background-size: 26/@rem 26/@rem;animation:circle 1s infinite linear;}

.formtips{padding: 20/@rem 40/@rem;position: fixed;left: 50%;top: 50%;border-radius: 8/@rem;background: rgba(0,0,0,0.8);color: #fff;font-size: 20/@rem;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);}